<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <h1>学生信息列表</h1>
      <hr>
      <button>刷新数据</button>
      <div>
          <label>学历</label>
          <select id="xueli">
              <option value="" >--请选择学历--</option>
          </select>
          <label>班级</label>
          <select id="classes">
              <option value="">--请选择班级--</option>
          </select>
      </div>
      <hr>
      <hr>
      <table border="1">
          <thead>
            <th>学号</th> 
            <th>姓名</th>  
            <th>性别</th>  
            <th>年龄</th>  
            <th>所在班级</th>   
          </thead>
          <tbody id="showDatas">
          </tbody>
      </table>
<script src='../utils/myquery.js'></script>
<script>
    //
    function getdata(){
        $.ajax({
          type:"get",
          url:"/student/showStudentList",
         data:{},
         success(result){
             //console.log(result)
             let obj = JSON.parse(result);
           //拼接显示的内容
            let str="";
            let datas = obj.students;
            for(let i=0;i<datas.length;i++){
                str+=`<tr>
                     <td>${datas[i].id}</td>
                     <td>${datas[i].name}</td>
                     <td>${datas[i].age}</td>
                     <td>${datas[i].gender}</td>
                     <td>${datas[i].class.name}</td>
                    </tr>`;
                    //把取回的内容添加到表格中
                  document.querySelector("#showDatas").innerHTML=str; 
            }

        }
        });


    }

    //获取数据
    getdata();

//绑定事件
document.getElementsByTagName("button")[0].onclick=()=>{
    //获取数据
    getdata();
}

</script>

</body>
</html>